@import '../../styles/colors.scss';
@import '../../styles/variables.scss';

$baseClass: 'vant-popup';
$baseContainerClass: 'vant-popup__container';
$baseContentClass: 'vant-popup__content';

.#{$baseContainerClass} {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  transition: 0.6s;

  &__isActive {
    visibility: visible;
    background-color: rgba(
      $color: $popup-background-color,
      $alpha: $popup-alpha
    );
  }

  &__center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.#{$baseClass} {
  overflow: scroll;
  background-color: $default;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s ease-in-out;
  position: fixed;

  &__closeable {
    .closeIcon {
      position: absolute;
      z-index: 2;

      i {
        cursor: pointer;
      }
    }
  }

  &__isActive {
    transform: translateX(0px) !important;
    transform: translateY(0px) !important;
    transition: 0.5s ease-in-out;
  }

  &__center {
    display: none;
  }

  &__left {
    height: 100vh;
    left: 0;
    transform: translateX(-100%);
  }

  &__right {
    height: 100vh;
    right: 0;
    transform: translateX(100%);
  }

  &__top {
    width: 100vw;
    top: 0;
    transform: translateY(-100%);
  }

  &__bottom {
    width: 100vw;
    bottom: 0;
    transform: translateY(100%);
  }
}

.#{$baseClass}::-webkit-scrollbar {
  width: 0 !important; //chrome and Safari
}

.#{$baseClass} {
  -ms-overflow-style: none; //IE 10+
  overflow: -moz-scrollbars-none; //Firefox
}

.vant-popup__center.vant-popup__isActive {
  display: block;
}

.#{$baseContentClass} {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  display: none;

  &__isActive {
    display: block;
  }
}
